---
title: Expo Router
description: Integrate Expo Router with Unistyles
---

import { Card, Aside } from '@astrojs/starlight/components'
import Seo from '../../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Expo Router integration',
        description: 'Integrate Expo Router with Unistyles'
    }}
>


[Expo Router](https://docs.expo.dev/router/introduction/) is a popular routing library from Expo that is built on top of React Navigation. When using Unistyles with Expo Router, it's necessary to configure it properly.

### Modify main entry

Expo Router resolves routes differently than expected. Also, Unistyles 3.0 is parsing your `StyleSheets` as soon as you import file containing it.
This combination may cause some issues. To prevent that you need to modify your main entry file:

```diff lang="json" title="package.json"
{
-   "main": "expo-router/entry"
+   "main": "index.ts"
}
```

Then, create `index.ts` file with following content:

```js title="index.ts"
import 'expo-router/entry'
import './unistyles' // <-- file that initializes Unistyles
```

<Aside>
The `unistyles.ts` file is where Unistyles is configured. For more details, refer to the [configuration guide](/v3/start/configuration).
</Aside>

With this setup, we will ensure that Unistyles is initialized before any other component.

### Expo Router Web - Static rendering

:::caution
This is the default option since Expo SDK 52.
:::

You can check if you are using static rendering in `app.json`:

```json title="app.json"
{
  "expo": {
    "web": {
      "bundler": "metro",
      "output": "static"
    }
  }
}
```

For Expo static rendering, every page will be resolved with the root HTML file. Unfortunately, this file is hidden, and you need to create it manually.
Please follow the [Expo guide](https://docs.expo.dev/router/reference/static-rendering/#root-html) and add a `+html.tsx` file.

In this file, initialize Unistyles by importing the config file:

```diff lang="tsx" title="+html.tsx"
import React from 'react'
import { ScrollViewStyleReset } from 'expo-router/html'
import { type PropsWithChildren } from 'react'
+ import '../unistyles' // <-- file that initializes Unistyles

export default function Root({ children }: PropsWithChildren) {
    ...
}
```

This ensures that Unistyles is initialized whenever Expo Router renders the next static page.

</Seo>
